<template>
  <!-- 卡片信息 -->
  <div class="item2">
    <div class="year">
      <span
        v-show="msg.isShow"
      >2022年</span>
      <div>
        <i>{{ msg.month }}</i>
        <i>月</i>
        <i
          v-show="msg.isShow"
          class="iconfont icon-sanjiaoxing"
        />
      </div>
    </div>
    <ul class="income">
      <li>
        <span>收入</span>
        <div>
          <i>{{ msg.income }}</i>
          <i>.00</i>
        </div>
      </li>
      <li>
        <span>支出</span>
        <div>
          <i>{{ msg.expenditure }}</i>
          <i>.00</i>
        </div>
      </li>
      <li v-show="!msg.isShow">
        <span>结余</span>
        <div>
          <i>{{ msg.surplus }}</i>
          <i>.00</i>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'

// 接受父组件数据
defineProps({
  msg: {
    type: Object,
    required: true
  }
})
</script>

<style lang="less" scoped>
  .item2{
    width: 100%;
    height: 45px;
    display: flex;
    margin-bottom: 10px;
    .year{
      flex: 1;
      margin-left: 5%;
      position: relative;
      height: 100%;
      &::after{
        content: '|';
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translate(0,-50%);
        font-size: 20px;
        color: gray;
      }
      div{
        position: absolute;
        left: 0;
        bottom: 4px;
        i{
          &:nth-child(1) {
          font-size: 20px;
        }
          &:nth-child(3) {
          font-size: 12px;
        }
        }
      }
    }
    .income{
      flex: 2.5;
      display: flex;
      li{
        &:nth-child(1){
          flex: 1;
        }
        &:nth-child(2){
          flex: 1;
        }
        &:nth-child(3){
          flex: 1;
        }
        span{
          color: #333;
        }
        div{
          i{
            &:nth-child(1){
              font-weight: 200;
              font-size: 20px;
            }
          }
        }
      }
    }
  }
</style>
